<template>
  <div class="refundlist" v-if="refundlist">
    <template v-if="refundlist.length == 0">
      <div class="nodata">
        <img src="http://47.115.51.185/h5/img/noOrder.90017ce2.png" alt="" />
      </div>
    </template>
    <template v-else>
      <ul class="Orderlist">
        <li v-for="item in refundlist" :key="item.id">
          <div class="item_time">
            <span class="add_time">订单号：{{ item.order_id }}</span>
            <svg
              t="1615945172465"
              class="refund_icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4683"
              width="44"
              height="44"
            >
              <path
                d="M227.555556 339.299556c12.416 15.303111 22.428444 29.809778 30.008888 43.761777l-14.264888 8.903111c-6.328889-13.184-16.028444-28.088889-29.084445-44.714666l13.340445-7.950222z m81.095111 225.863111c-11.804444-2.716444-24.675556-5.930667-38.428445-9.344-13.980444-3.456-25.031111-7.409778-33.137778-11.875556-7.850667-4.622222-14.364444-11.989333-19.2-21.546667-2.019556-4.451556-4.266667-6.855111-6.954666-7.466666-5.347556-1.237333-16.611556 6.954667-33.592889 24.604444l-9.514667-13.681778c16.128-15.985778 29.212444-24.931556 39.267556-26.823111l15.644444-67.697777-31.630222-7.310223 3.384889-14.705777 46.549333 10.752-19.271111 83.512888c1.464889 1.749333 2.659556 3.669333 3.982222 6.087112 3.854222 7.68 8.348444 13.653333 13.468445 17.891555 5.973333 4.650667 15.36 8.704 27.946666 12.074667 11.52 2.901333 25.728 6.4 42.652445 10.311111 11.136 2.574222 22.542222 4.977778 34.176 7.424 11.633778 2.460444 20.593778 4.295111 26.936889 5.276444l-7.722667 15.118223-54.556444-12.600889z m1.265777-105.031111c10.595556 9.955556 20.309333 19.697778 29.255112 29.738666 10.154667-5.404444 19.029333-11.320889 27.022222-17.450666l9.528889 11.576888c-9.102222 6.826667-17.92 12.515556-26.752 17.28a447.047111 447.047111 0 0 1 24.035555 32.995556l-12.515555 9.557333c-14.862222-25.031111-35.612444-49.991111-62.236445-74.894222l11.662222-8.817778z m-18.929777-50.119112l-4.579556 19.825778 74.382222 17.166222 4.579556-19.811555-74.382222-17.180445z m77.468444 3.811556l4.579556-19.825778-74.382223-17.166222-4.579555 19.825778 74.382222 17.166222z m-85.390222 30.492444l-13.880889 60.131556c15.317333 0.711111 30.791111 0.768 46.236444-0.113778l0.227556 15.288889c-18.460444 0.668444-41.358222 0.312889-68.892444-1.351111l-0.199112-14.364444c4.366222-0.625778 6.883556-2.389333 7.537778-5.290667l32.298667-139.861333 105.799111 24.419555-18.915556 81.962667-90.211555-20.821334z m146.204444-40.846222l47.203556 10.894222 4.679111-20.266666 15.146667 3.498666-4.693334 20.266667 40.988445 9.457778-3.285334 14.250667-40.988444-9.457778-4.522667 19.598222 35.868445 8.277333-3.2 13.809778-90.410667-20.878222 3.185778-13.795556 39.409778 9.102223 4.536889-19.612445-47.217778-10.894222 3.285333-14.250667z m0.071111 68.750222l76.16 17.578667-3.228444 14.037333-76.174222-17.592888 3.242666-14.023112z m-20.736 27.818667l104.234667 24.064-3.242667 14.023111-43.662222-10.069333-12.842666 55.68c-2.673778 11.576889-10.296889 16.156444-22.769778 13.269333l-18.929778-4.366222 0.227556-15.203556c5.632 2.005333 11.320889 3.797333 16.668444 5.020445 5.788444 1.336889 9.301333-0.668444 10.481778-5.788445l12.032-52.110222-45.44-10.496 3.242666-14.023111z m10.993778 28.586667l12.359111 5.418666c-8.917333 16.241778-19.271111 29.582222-31.104 40.206223l-10.225777-10.567111a119.466667 119.466667 0 0 0 28.970666-35.072z m69.902222 14.250666c2.986667 11.477333 5.361778 23.523556 6.869334 36.309334l-13.767111 2.688a232.049778 232.049778 0 0 0-6.997334-37.745778l13.895111-1.251556z m69.888-130.005333l14.136889 5.831111c-4.010667 11.278222-8.206222 21.333333-12.472889 30.677334l58.794667 13.568-2.261333 9.813333a547.598222 547.598222 0 0 1-24.533334 53.432889l-13.937777-7.68a329.742222 329.742222 0 0 0 22.030222-44.629334l-47.004445-10.851555c-9.429333 17.521778-19.626667 31.118222-30.535111 40.803555l-10.24-11.52c18.318222-17.351111 33.592889-43.847111 46.023111-79.445333z m-0.398222 69.802667l14.705778 3.399111a396.700444 396.700444 0 0 1-11.747556 40.675555c1.678222 37.461333 11.904 69.376 30.72 95.544889l-13.511111 9.784889c-14.833778-23.139556-24.291556-49.251556-28.259555-78.791111-0.810667 1.464889-1.379556 2.986667-2.247111 4.650667-12.970667 24.689778-33.493333 42.467556-61.895111 53.745778l-7.082667-14.08c24.561778-9.813333 42.808889-24.832 54.855111-45.511112 9.656889-17.464889 17.777778-40.462222 24.462222-69.404444z m190.065778-27.662222l16.483556 3.811555-9.244445 40.078222 79.943111 18.460445-24.177778 104.675555-16.028444-3.697777 3.242667-14.037334-63.914667-14.748444-17.536 75.946666-16.483556-3.811555 17.536-75.946667-63.701333-14.705778-3.228444 14.037334-16.042667-3.697778 24.177778-104.675556 79.715555 18.403556 9.258667-40.092444z m-90.282667 100.437333l63.715556 14.705778 13.710222-59.463111-63.687111-14.705778-13.738667 59.463111z m80.184889 18.517333l63.914667 14.748445 13.724444-59.463111-63.914666-14.762667-13.724445 59.477333z"
                fill="#F7ADAD"
                p-id="4684"
              ></path>
              <path
                d="M508.16 196.920889l23.751111-2.517333 19.384889 14.734222 3.868444-23.011556 19.456-12.913778-21.333333-11.719111-7.367111-22.712889-17.066667 15.786667-24.021333-1.137778 10.808889 21.475556-7.480889 22.016z m297.230222 162.56l4.992 23.822222 18.005334-14.848 23.168 2.986667-8.448-22.840889 9.287111-21.973333-23.210667 0.739555-17.408-16.597333-5.902222 23.310222-20.053334 11.733333 19.569778 13.653334z m-144.028444-125.866667l22.812444 7.068445 12.003556 21.191111 12.643555-19.626667 22.968889-4.181333-14.990222-19.2 2.176-23.765334-21.888 7.765334-21.617778-10.510222 1.450667 24.007111-15.559111 17.265777z m-285.696-19.242666l4.721778 22.755555 19.185777-14.193778 24.177778 2.858667-8.348444-21.802667 10.24-20.992-24.348445 0.711111-17.863111-15.815111-6.712889 22.229334-21.262222 11.221333 20.209778 13.027556z m133.418666 629.76l-23.580444 2.56-19.228444-14.620445-3.896889 22.940445-19.384889 12.899555 21.176889 11.619556 7.253333 22.613333 16.995556-15.772444 23.864888 1.052444-10.680888-21.333333 7.480888-21.944889zM363.392 798.435556l-22.641778-6.968889-11.875555-21.077334-12.600889 19.584-22.840889 4.224 14.848 19.072-2.218667 23.68 21.774222-7.793777 21.461334 10.424888-1.393778-23.907555 15.488-17.237333z m-134.656-118.855112l-4.892444-23.694222-17.962667 14.819556-23.04-2.929778 8.334222 22.698667-9.344 21.873777 23.125333-0.810666 17.28 16.455111 5.944889-23.182222 19.996445-11.704889-19.441778-13.525334z m556.515556-589.496888C552.917333-60.8 241.180444 5.447111 90.339556 237.738667-60.501333 470.016 5.774222 781.738667 238.08 932.608c232.32 150.869333 544.028444 84.622222 694.883556-147.669333 150.855111-232.277333 84.579556-544-147.740445-694.869334zM256.241778 904.647111C39.367111 763.790222-22.499556 472.746667 118.328889 255.900444 259.157333 39.04 550.186667-22.812444 767.075556 118.044444c216.888889 140.842667 278.769778 431.872 137.941333 648.732445-140.842667 216.860444-431.872 278.712889-648.760889 137.870222z m484.821333-746.567111C546.261333 31.573333 284.871111 87.111111 158.364444 281.912889c-126.492444 194.787556-70.912 456.177778 123.889778 582.684444 194.816 126.506667 456.206222 70.968889 582.712889-123.818666 126.492444-194.787556 70.912-456.177778-123.889778-582.684445z m-65.891555 676.024889l-6.215112-22.257778-18.062222 15.502222-24.149333-1.080889 9.742222 21.048889-8.718222 21.617778 24.078222-2.503111 18.588445 14.279111c-119.267556 51.029333-261.063111 43.719111-377.799112-32.099555-186.012444-120.775111-239.061333-370.346667-118.286222-556.316445S544.711111 53.276444 730.709333 174.065778c185.998222 120.789333 239.061333 370.360889 118.286223 556.344889a399.829333 399.829333 0 0 1-178.304 150.200889l5.077333-22.328889 20.295111-12.672-20.906667-11.491556h0.028445z m85.404444-402.005333a261.703111 261.703111 0 0 0-106.652444-139.832889c-105.045333-68.224-244.110222-52.224-330.666667 38.044444l12.032 11.548445c81.024-84.494222 211.214222-99.470222 309.546667-35.612445a245.020444 245.020444 0 0 1 99.84 130.901333l15.900444-5.048888zM378.481778 716.430222a245.006222 245.006222 0 0 1-99.84-130.901333l-15.900445 5.063111a261.703111 261.703111 0 0 0 106.666667 139.832889c105.045333 68.224 244.124444 52.195556 330.666667-38.058667l-12.032-11.534222c-81.038222 84.48-211.214222 99.470222-309.560889 35.598222z"
                fill="#F7ADAD"
                p-id="4685"
              ></path>
            </svg>
          </div>
          <div class="product_info">
            <div class="info_introduce" @click="ToOrderDetail(item.order_id)">
              <div>
                <van-image
                  :src="item.cartInfo[0].productInfo.image"
                  @click.stop="ToDetail(item.cartInfo[0].product_id)"
                />
                <p>{{ item.cartInfo[0].productInfo.store_name }}</p>
                <p class="suk">
                  {{ item.cartInfo[0].productInfo.attrInfo.suk }}
                </p>
              </div>
              <div class="introduce_price">
                <span>￥{{ item.cartInfo[0].productInfo.price }}</span>
                <span>x{{ item.total_num }}</span>
              </div>
            </div>
            <div class="info_commodity">
              <span>共{{ item.cartInfo.length }}件商品，总金额 </span>
              <span>￥{{ item.pay_price }}</span>
            </div>
          </div>
        </li>
      </ul>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      refundlist: null,
    };
  },
  created() {
    this.axios
      .get("/api/order/list?page=1&limit=20&type=-3")
      .then((response) => {
        this.refundlist = response.data.data;
      });
  },
  methods: {
    ToOrderDetail(id) {
      this.$router.push({
        path: "/order/detail",
        query: {
          id,
        },
      });
    },
    ToDetail(id) {
      this.$router.push({
        path: "/detail",
        query: {
          id,
        },
      });
    },
  },
};
</script>

<style lang="less">
.refundlist {
  width: 100%;
  .nodata {
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 207px;
      height: 168px;
    }
  }
  .Orderlist {
    width: 100%;
    li {
      width: 100%;
      border-radius: 4px;
      margin-bottom: 10px;
      background-color: #fff;
      .item_time {
        width: 100%;
        height: 40px;
        border-bottom: 1px solid #f3f3f3;
        padding: 0 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        .add_time {
          font-size: 14px;
        }
        .refund_icon{
            position: absolute;
            top: 5px;
            right: 15px;
        }
      }
      .product_info {
        width: 100%;
        padding: 15px 15px;
        border-bottom: 1px solid #f3f3f3;
        .info_introduce {
          overflow: hidden;
          display: flex;
          .van-image {
            width: 60px;
            height: 60px;
            float: left;
          }
          p {
            width: 200px;
            float: left;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            font-size: 14px;
            margin-left: 10px;
            margin-top: 5px;
          }
          .suk {
            font-size: 12px;
            color: #868686;
          }
          .introduce_price {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            color: #9999b3;
            font-size: 14px;
            margin-top: 5px;
          }
        }
        .info_commodity {
          width: 100%;
          display: flex;
          justify-content: flex-end;
          margin-top: 15px;
          span {
            font-size: 12px;
            &:nth-child(2) {
              font-weight: bold;
              color: red;
              margin-left: 3px;
            }
          }
        }
      }
    }
  }
}
</style>